<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript" src="/static/js/jquery-3.3.1.js"></script>
<div id="apps">
    <h1>登录页面==name--{{name}}=={{age}}=={{user.name}}=={{user.pass}}</h1>
    <!--<form action="#" method="post">-->
        <input type="text" name="name" v-model="user.name" v-on:change="changes"><br>
        <input type="password" name="pass" v-model="user.pass"><br>
        <input type="checkbox" name="nolog" v-model="nolog">免登录<br>
        <button v-on:click="login()">登录</button>
    <!--</form>-->
</div>
<script type="text/javascript">
    var v=new Vue({
        el:'#apps', //绑定了dom对象
        data:{ //vue对象的属性区域
            name:'hello',
            age:20,
            user:{
                name:'',
                pass:''
            },
            nolog:'nolog'
        },
        methods:{
            changes:function(){
                //用户输入完昵称后，发起请求，向服务器尝试获得该昵称对应的密码
                $.ajax({
                    url:'/user/getPass',
                    data:{name:v.user.name},
                    type:'get',
                    success:function(res){//此时res是String类型
                        v.user.pass=res;
                    }
                })
            },
            login:function(){
                $.ajax({
                    //发起请求url：user/login
                    url:'/user/login',
                    //携带参数data: 取出name/取出pass的值
                    data:{name:v.user.name,pass:v.user.pass,nolog:v.nolog},
                    //请求方式type:post
                    type:'post',
                    //返回数据结果dataType:json
                    dataType:'json',
                    //成功回调函数success:function(res){ if(res.code==201){//登录失败}else{//登录成功; // location.href="index页面"}}
                    success:function(res){
                        if(res.code==201){
                            v.user.pass="";//清空密码框
                            alert(res.msg);
                        }else{
                            //跳转到首页
                            alert("ok");
                            location.href="/url/index";
                        }
                    }
                    //失败回调函数error
                });
            }
        }
    });

</script>
</body>
</html>